<style>
  #app{display: table;width:100%;}
  body{background: #fff;}


 .paypassword  .identity_all{
    border:1px solid #dcdcdc;
    margin-top:20px;
    padding-bottom: 50px;
  }
 .paypassword  .identity_all .identity_header{
    border-width:0 0 1px 0;
    margin-top:0;
  }
 .paypassword  .identity_content .el-form{
    max-width:540px;
    margin:40px auto;
  }
 .paypassword  .identype{display: flex;flex-direction: column;}
  .paypassword .identype .el-form-item__label{text-align: left;}
  .paypassword .info_item{padding:15px 0;}
  .paypassword .info_label{width: 80px;display: inline-block;}
  .paypassword .forget{cursor: pointer;}
   .bindphone .el-form-item__label{    display: block;    width: 100%;    text-align: left;float: none;}
  .bindphone .el-form-item__content{
    display: flex;
  }
  .bindphone .el-input__inner{
    border-radius: 4px 0 0 4px;
  }
   .bindphone .el-button{
    border-radius: 0 4px 4px 0 ;
  }
   .el-select .el-input {
    width: 130px;
  }
  .el-select .el-input .el-input__inner{
    padding:0 15px;
  }
  .input-with-select .el-input-group__prepend ,.bindphone .el-button{
    background-color: #f5f7fa;
  }
</style>
<template>
  <div>
    <div class="">
    
      <div class="login_content paypassword">  
        <div class="usercenter_all">
          <div class="identity_header">           
                <el-breadcrumb separator="/" class="bread" id="mybread">
                  <el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="index" :to="item">
                    {{ item.meta.name || item.name }}
                  </el-breadcrumb-item>
                </el-breadcrumb>
          </div>
        </div>  
        <div class="usercenter_all identity_all">
          <div class="identity_header">绑定手机验证</div>
          <div class="identity_content ">

              <el-form :model="identForm" class="login-form" :rules="identFormRules" ref="identForm">
                     
                    <el-form-item label="原手机号"  prop="oldPhoneNum">
                      <el-input  :autofocus="true"  disabled v-model="identForm.oldPhoneNum">
                      </el-input>
                    </el-form-item>
                       <el-form-item label="新手机号"  prop="phoneNum">
                      <el-input  :autofocus="true"  v-model="identForm.phoneNum"  @blur="isRegMobile" class="input-with-select">
                        <el-select  v-model="identForm.code" slot="prepend" placeholder="请选择">
                          <el-option v-for="item in codeArr" :label="'+'+item.value" :value="item.value">
                             <span style="float: left">{{ item.label }} ({{item.name}})</span>
                          </el-option>
                          <el-option label="订单号" value="2"></el-option>
                          <el-option label="用户电话" value="3"></el-option>
                        </el-select>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="短信验证码" class="verify bindphone" prop="mobileCode">
                      <el-input type="text" placeholder="请输入手机验证码" class="phoneVerify" v-model="identForm.mobileCode"></el-input>
                       <el-button v-if="!isSendVerify" @click.native="sendVerify" type="default" class="verification1">发送验证码</el-button>
                      <el-button v-if="isSendVerify" type="default" class="verification1">{{time}}s后重新发送</el-button>

                    </el-form-item>
                             
        
                    <el-form-item class="btn_reg">
                      <el-button  @click.native="setpaySubmit" type="primary" :loading="isBtnLoading">修改</el-button>
                    </el-form-item>
                  
                  </el-form>
            </div>  
          </div> 
       
          
     
      </div>
    
    </div>
   
  </div>
</template>

<script>
import * as users from '../api/users';
import myHeader from './common/header'
import md5 from 'js-md5';
import internationalCode from "../api/internationalCode"


var code ; //在全局定义验证码
export default {
  components:{
    myHeader
  },
  computed: {   
     
    },
  data() {
    var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!isvalidPhone.isvalidPhone(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else{
        // console.log(this.isRegMobile())
        // callback(new Error('该号码已经注册过'))    
        // this.isRegMobile()     
          callback();
          
      }
    };
    return {
      time:60,
      isSendVerify:false,
      isreg:false,
      codeArr:[],

      isBtnLoading:false,
      identForm:{},
      identFormRules:{   
          oldPhoneNum:[
              { required: true, message: '请输入手机号', trigger: 'blur' }

          ],     
          mobileCode: [
            { required: true, trigger: 'blur', validator:validPhone }//这里需要用到全局变量
            
          ],
          phoneNum: [
              { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
         
      },
      userId:'',
      list:[],
      showCount:20,
    total:0,
        page: 1,
    onOff:true,
   
      picLyanzhengma:'',
      checkCode:'',
      username: '',
      password: '',
      isBtnLoading: false,
      routerPath:'',
      isRealName:false,
      userInfo:'',
    };
  },
  computed: {   
  activeMenu: function(){
      // return this.$route.name
      return this.$route.path
    },
    breadcrumbs: function(){
      return (this.$route && this.$route.matched) || []
    }
  },
  methods: {
  
     //数字显示转换
    formatSex: function (row) {
      console.log(row)
      return row.idCardType == 1 ? '身份证' : row.idCardType == 2 ? '军官证' : '护照';
    },

    isRegMobile(){
      // let isreg=true;
      if(this.identForm.phoneNum){
        let para={
          mobile:this.identForm.phoneNum
        }
        common.validMobileReg.r(para).then((res)=>{
            console.log(res);
            if(res.data.retCode==1){
              if(res.data.data!=null&&res.data.data!='null'&&res.data.data!=''){
                this.isreg= true;
                // callback();
              }else{
                this.isreg= false;               
                 this.$message.error('该号码尚未注册过')

              }
            }else{
              // this.$message.error(res.data.retMsg)
                this.isreg= true;              
            }

          })
      }
   
    },
    sendVerify(){
      if(this.isreg){
        let para={
          mobile:this.regForm.mobile,
          verifyCode:this.regForm.verifycode
        }
        console.log(para)
        common.sendVerify.r(para).then((res)=>{
          console.log(res);
          if(res.data.retCode==1){
            this.$message.success("验证码发送成功")
            
            this.isSendVerify=true;
            let vm=this;
            let interval = setInterval(function() {
            if ((vm.time--) <= 0) {
              vm.time = 60;
              vm.isSendVerify = false;
              clearInterval(interval);
             }
            }, 1000);
          }else{
            this.$message(res.data.retMsg);
          }
        })
      }else{
        this.$message.error("该号码尚未注册过")
      }
     
    },
    setpaySubmit(){
      this.$refs.identForm.validate((valid) => {
        if (valid) {
          // let para=this.identForm;
          let para={
            password:md5('STARSAND_' + this.identForm.password),
            userId:this.userId,
            mobileCode:this.identForm.mobileCode,
            oldPassword:md5('STARSAND_' + this.identForm.oldPassword)
          }
     

          console.log(para);
          users.setPassword.r(para).then((res)=>{
            console.log(res)
            if(res.data.retCode==1){
              this.$message("登录密码修改成功,请重新登录");
              this.$router.push("/login")

            }else{
              this.$message.error(res.data.retMsg);
            }
          })
        }else{
          console.log('error submit!!');
          return false;
        }
      })

    },
    fetchData(){
      //获取国际区号      
      internationalCode.map(x=>{
        this.codeArr.push({label:x.split("-")[0],value:x.split("-")[2],name:x.split("-")[1]})
      })
     
      this.identForm.code="86";
    },
    fetchDataUser(){
      //获取用户信息
      let para={
        userId:this.userId,
      }
      users.info.r(para).then((res) => {
        console.log(res)
        if(res.data.retCode==1){
          // this.identForm.authLevel=res.data.data.authLevel;
          this.realName=res.data.data.realName;
          if(res.data.data.realName){
            this.isRealName=true;
          }else{
            this.isRealName=false;
          }
          this.identForm.oldPhoneNum=res.data.data.mobile;
          this.userInfo=res.data.data;
          this.userInfo.idCardType=this.formatSex(this.userInfo);
          sessionStorage.setItem("localUser",JSON.stringify(res.data.data))

        }else{
          this.$message.error(res.data.retMsg);
        }
         
         

        });
    },
    handEdit(){

    },

  },

  created() {
    this.fetchData();
    this.userId=sessionStorage.getItem("userId");
    this.fetchDataUser();
    
  }
};
</script>
